<template>
	<view class="limit">

		<view class="limit-1">
			<image class="im-1" src="@/static/borrow/limit-1.png" mode=""></image>
			<view class="wz">
				<view class="wz-1">
					<text class="wt">当前可用额度</text>
				</view>
				<view class="wz-1">
					<text class="ed">8,000</text>
				</view>
				<view class="wz-1">
					<view class="wzk">
						<text class="wzk-1">日利率:0.038%</text>
						<text class="wzk-1">提前还款无需费用</text>
					</view>

				</view>
			</view>
		</view>
		<view class="limit-2">
			<view class="box1">
				<view class="box-1">
					<view class="tb-1">
						<text>￥</text>
					</view>
					<input class="inp-1" type="text" value="" placeholder="请按100的倍数输入" />
					<view class="tb-2">
						<text class="wz-1">按日计息，日息</text><text class="wz-2">0.038%</text>
					</view>
				</view>
				<view class="box-2">
					<view class="box-2-1">
						<view class="wz-1">
							<text>借款期限</text>
						</view>
						<view class="wz-1">
							<text @click="show=true">12个月</text>
							<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selector">
							</u-picker>
						</view>
					</view>
					<view class="box-2-2">
						<view class="sl-1">
							<text>一个月</text>
						</view>
						<view class="sl-1">
							<text>三个月</text>
						</view>
						<view class="sl-1">
							<text>六个月</text>
						</view>
						<view class="sl-1">
							<text>十二个月</text>
						</view>
					</view>
				</view>
				<view class="box-3">
					<view class="wz-1">
						<text class="w1">还款方式</text>
					</view>
					<view class="wz-2">
						<text class="w1">按日计息，总利息约为</text><text class="w2">472.34</text><text class="w3">元</text>
					</view>
				</view>
				<view class="box-3">
					<view class="wz-1">
						<text class="w1">首次还款</text>
					</view>
					<view class="wz-2">
						<text class="w1">首期10月19日,应还</text><text class="w2">￥520.34</text>
					</view>
				</view>
				<view class="box-3">
					<view class="wz-1">
						<text class="w1">收款账户</text>
					</view>
					<view class="wz-2">
						<text class="w1">中国建设银行(8645)></text>
					</view>
				</view>
			</view>
		</view>
		<view class="limit-3">
			<view class="li-1">
				<label class="xz">
					<checkbox value="cb" :checked="flang" @click="flang=true" />
				</label>
			</view>
			<view class="li-2">
				<text class="wz">本人已阅读并同意《相关借款协议》，并将本次借款用于个人日常消费，同意报送贷款相关信息至金融信息基础数据库。</text>
			</view>
			<view class="li-3">
				<navigator class="button" url="#" @tap="pass">确认借钱</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				selector: [`一个月`,`三个月`,`六个月`,`十二个月`],
				flang: false,

			}
		},
		methods: {
			pass() {
				uni.navigateTo({
					url: "./Pass"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.limit {
		position: relative;
		height: 100vh;
		width: 750rpx;
		box-sizing: border-box;

		.limit-1 {
			position: relative;
			width: 100%;
			height: 300rpx;

			.im-1 {
				position: absolute;
				width: 100%;
				height: 120%;
				z-index: -1;
			}

			.wz {
				width: 100%;
				height: 100%;

				.wz-1 {

					width: 100%;
					height: 25%;
					line-height: 180rpx;
					text-align: center;


					.wt {
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.ed {
						font-size: 65rpx;
						font-weight: 800;
						color: #FFFFFF;
					}

					.wzk {
						width: 100%;
						height: 50%;
						text-align: center;

						.wzk-1 {
							width: 50%;
							height: 50%;
							margin-left: 10rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							border-radius: 10rpx;
							border: 1rpx solid #FFFFFF;
						}
					}
				}
			}
		}

		.limit-2 {
			margin-top: 20rpx;
			width: 100%;
			height: 580rpx;
			padding: 40rpx;

			.box1 {
				width: 100%;
				height: 100%;

				.box-1 {
					width: 100%;
					height: 100rpx;
					display: flex;
					flex-wrap: wrap;

					.tb-1 {
						width: 10%;
						height: 62%;
						font-size: 40rpx;
						font-weight: 800;
						text-align: center;
						line-height: 55rpx;
						border-bottom: 1rpx solid #e5e5e5;

					}

					.tb-2 {
						width: 100%;
						height: 40%;
						text-align: right;

						.wz-1 {
							font-size: 24rpx;
							color: #9e9e9e;
						}

						.wz-2 {
							font-size: 24rpx;
							font-weight: 600;
							color: #e8544d;
						}
					}

					.inp-1 {
						width: 90%;
						height: 60%;
						border-bottom: 1rpx solid #e5e5e5;
					}
				}

				.box-2 {
					width: 100%;
					height: 150rpx;
					padding: 10rpx 0rpx;

					.box-2-1 {
						width: 100%;
						height: 40%;
						display: flex;
						text-align: center;
						line-height: 50rpx;
						justify-content: space-between;

						.wz-1 {
							width: 20%;
							height: 100%;
							font-size: 28rpx;
							font-weight: 800;
						}
					}

					.box-2-2 {
						width: 100%;
						height: 60%;
						display: flex;

						justify-content: space-around;

						.sl-1 {
							margin-top: 10rpx;
							width: 20%;
							height: 50%;
							font-size: 24rpx;
							font-weight: 700;
							text-align: center;
							border-radius: 15rpx;
							border: 1px solid;

						}
					}
				}

				.box-3 {
					width: 100%;
					height: 80rpx;
					display: flex;
					line-height: 80rpx;
					border-bottom: 2px solid #e5e5e5;

					.wz-1 {
						width: 20%;
						height: 100%;

						.w1 {
							font-size: 28rpx;
							font-weight: 800;
						}
					}

					.wz-2 {
						text-align: right;
						width: 80%;
						height: 100%;

						.w1 {
							font-size: 24rpx;
						}

						.w2 {
							font-size: 24rpx;
							color: #e4887e;
						}

						.w3 {
							font-size: 24rpx;
							color: #888888;
						}
					}
				}
			}
		}

		.limit-3 {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			padding: 0rpx 40rpx;
			display: flex;
			flex-wrap: wrap;

			.li-1 {
				width: 10%;
				height: 70%;
				padding: 40rpx 10rpx;
			}

			.li-2 {
				width: 90%;
				height: 60%;

				.wz {
					font-size: 26rpx;
					font-weight: 700;
				}
			}

			.li-3 {
				width: 100%;
				height: 40%;

				.button {
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
					color: #FFFFFF;
					font-weight: 800;
					border-radius: 15rpx;
					background-color: #3775f6;
				}
			}
		}
	}
</style>
